<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 500px;
				height: 500px;
				padding: 5px;
				background-color:#EAEAEA ;
				border: none;
				margin: 0 auto;
				border-spacing: 10px;
			}
			tr{
				height: 100px;
				margin-top: 10px;
			}
			td{
				width: 100px;
				margin: 10px 10px;
				background-color: #424242;
				color: white;
				text-align: center;
			}
			td section:nth-child(1){
				font-size: 30px;
				font-weight: 900;
			}
			td section:nth-child(2){
				font-size: 20px;
			}
			#lastsectT{
				color: #666666;
				text-align: left;
				font-size:25px;
			}
			#lastsectC{
				margin-top: 10px;
				color: #666666;
				text-align: left;
				font-size:20px;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>
					<section>1</section>
					<section>JAN</section>
				</td>
				<td>
					<section>2</section>
					<section>FER</section>
				</td>
				<td>
					<section>3</section>
					<section>MAR</section>
				</td>
				<td>
					<section>4</section>
					<section>APR</section>
				</td>
			</tr>
			<tr>
				<td>
					<section>5</section>
					<section>MAY</section>
				</td>
				<td>
					<section>6</section>
					<section>JUN</section>
				</td>
				<td>
					<section>7</section>
					<section>JUL</section>
				</td>
				<td>
					<section>8</section>
					<section>AUG</section>
				</td>
			</tr>
			<tr>
				<td>
					<section>9</section>
					<section>SEP</section>
				</td>
				<td>
					<section>10</section>
					<section>OCT</section>
				</td>
				<td>
					<section>11</section>
					<section>NOV</section>
				</td>
				<td>
					<section>12</section>
					<section>DEC</section>
				</td>
			</tr>
			<tr>
				<td   style="border: 2px solid white;background-color: #F1F1F1;" colspan="4">
					<section id="lastsectT"></section>
					<section id="lastsectC"></section>
				</td>
			</tr>
		</table>
	</body>
</html>
<script type="text/javascript">
	var tds = document.getElementsByTagName('td');
	var lastsectT = document.getElementById('lastsectT');
	var lasrsectC = document.getElementById('lastsectC');
	var oArray = [
                "元旦：1月1日至3日放假三天。",
                "春节：2月2日至8日放假7天。",
                "妇女节：3月8日妇女节，与我无关。",
                "清明节：4月3日至5日放假3天",
                "劳动节：4月30日至5月2日放假3天。",
                "端午节：6月4日至6日放假3天。",
                "小暑：7月7日小暑。不放假。",
                "七夕节：8月6日七夕节。不放假。",
                "中秋节：9月10日至12日放假3天。",
                "国庆节：10月1日至7日放假7天。",
                "立冬：11月8日立冬。不放假。",
                "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
            ];

	for (var i = 0; i < tds.length - 1; i++) {
		tds[i].index = i;
		tds[i].onmousemove = function() {
			this.style.backgroundColor = 'white';
			this.style.color = '#FF6E99'
			lastsectT.innerHTML = (this.index + 1) + '月节日';
			lasrsectC.innerHTML = oArray[this.index];
		}
		tds[i].onmouseout = function() {
			this.style.backgroundColor = '#424242';
			this.style.color = 'white'
		}
	};
	
	
	
	
</script>